drow3DAxes(context);
var x1 = document.getElementById('x1');
var y1 = document.getElementById('y1');
var z1 = document.getElementById('z1');
var x2 = document.getElementById('x2');
var y2 = document.getElementById('y2');
var z2 = document.getElementById('z2');
var x3 = document.getElementById('x3');
var y3 = document.getElementById('y3');
var z3 = document.getElementById('z3');

x1.onmouseover = hint;
y1.onmouseover = hint;
z1.onmouseover = hint;
x2.onmouseover = hint;
y2.onmouseover = hint;
z2.onmouseover = hint;
x3.onmouseover = hint;
y3.onmouseover = hint;
z3.onmouseover = hint;

var show = document.getElementById('show');
var refurbish = document.getElementById('refurbish');
refurbish.onclick = function () {
    location.reload();
}

async function buOnclick() {
    let dashC = '#9900FF'; //虚线（辅助线）颜色
    if (x1.value == '' || y1.value == '' || z1.value == '' ||
        x2.value == '' || y2.value == '' || z2.value == '') {
        alert('请先输入！');
        return;
    }
    var x11 = 0;
    var y11 = 0;
    var z11 = 0;
    var x22 = 0;
    var y22 = 0;
    var z22 = 0;

    try {
        x11 = eval(x1.value);
        x22 = eval(x2.value);
        y11 = eval(y1.value);
        y22 = eval(y2.value);
        z11 = eval(z1.value);
        z22 = eval(z2.value);
    } catch (error) {
        alert("输入格式不正确，请重新输入！");
        return;
    }

    x3.value = x11 - x22;
    y3.value = y11 - y22;
    z3.value = z11 - z22;
    var x33 = x3.value * 1;
    var y33 = y3.value * 1;
    var z33 = z3.value * 1;
    context.save();

    if( Math.abs(x11)>12 || Math.abs(x22)>12 ||
        Math.abs(y11)>12 || Math.abs(y22)>12 ||
        Math.abs(z11)>12 || Math.abs(z22)>12){
            alert('输入的范围有误，请输入的范围在12子内！');
            return;
    }


    context.lineWidth = 3;
    await drow3DVector(context, x11, y11, z11, true, 'red');
    addFont_3D(context, 'a', x11, y11, z11,"black","bold italic 20pt Times new roman");
    await Sleep(2000);

    clearCanvas(context, 3);
    drow3DVector3(context, x11, y11, z11, 'red');
    addFont_3D(context, 'a', x11, y11, z11,"black","bold italic 20pt Times new roman");
    await drow3DVector(context, x22, y22, z22,true, 'green');
    addFont_3D(context, 'b', x22, y22, z22,"black","bold italic 20pt Times new roman");
    await Sleep(2000);

    clearCanvas(context, 3);
    drow3DVector3(context, x11, y11, z11, 'red');
    drow3DVector3(context, x22, y22, z22,'green');
    addFont_3D(context, 'a', x11, y11, z11,"black","bold italic 20pt Times new roman");
    addFont_3D(context, 'b', x22, y22, z22,"black","bold italic 20pt Times new roman");

    context.lineWidth = 6;
    await drowDashedLine2(context, -x11, -x11, -x11 + x22, -x11 + x22, dashC);
    await drowDashedLine2(context, y11, 0, y11 * 1 - y22 * 1, 0, dashC);
    await drowDashedLine2(context, 0, z11, 0, z11 * 1 - z22 * 1, dashC);
    await Sleep(2000);
    
    context.lineWidth = 3;
    await drow3DVector(context, x33, y33, z33, true, 'blue');
    addFont_3D(context, 'c', x33, y33, z33,"black","bold italic 20pt Times new roman");
    context.restore();
}

show.addEventListener('click', buOnclick);